<template>
  <!-- 催收执行页-历史信息模块-外访行动历史 -->
  <section class="component visit-action-history">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="行动码" prop="followupBack">
          <el-select placeholder="请选择" v-model="searchModel.followupBack" clearable>
            <el-option v-for="item in customDataDict.filter(v=>v.dataType==='FOLLOW_UP').filter(m=>m.name!=='行动代码')" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收员" prop="operatorRealName">
          <el-input v-model="searchModel.operatorRealName" clearable></el-input>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="searchModel.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box @onPageChange="refreshData" :data="dataSet" :page="pageService" :height="200">
      <template slot="columns">
        <el-table-column prop="id" label="行动流水" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="relationship" label="与本人关系" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dictConvert(row.relationship, 'Relationship')">
        </el-table-column>
        <el-table-column prop="targetName" label="姓名" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="addressDetail" label="催收地址" :min-width="$helper.getColumnWidth(8)" :formatter="(row) => $city.getInheritNames(Number(row.areaId)) + row.addressDetail">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column label="行动码" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span>{{scope.row.followupBack | dictcustomConvert(scope.row.followupBack)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="行动日期" :min-width="$helper.getColumnWidth(5)">
          <template slot-scope="scope">
            <span>{{scope.row.followTime | dateTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operatorRealName" label="催收员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="followContent" label="行动说明" :min-width="$helper.getColumnWidth(10)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import DataBox from '~/components/common/data-box.vue';
import DataForm from '~/components/common/data-form.vue';
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import { CASE_CHANNEL } from "~/config/enum.config";
import { State } from "vuex-class";

@Component({
  components: {
    DataBox,
    DataForm,
  },
})
export default class VisitActionHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @State private customDataDict;
  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;
  private searchModel: any = {
    followupBack: '',
    operatorRealName: '',
    overduePeriod: '',
  };
  private dataSet: any[] = [];

  //重置搜索条件
  private resetSearchFelid() {
    const form: any = this.$refs['form'];
    form.resetForm();
  }
  //获取外访行动历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.searchModel.followupType = CASE_CHANNEL.visit;
    this.caseOperatorPageService
      .caseFollowupRecord(this.searchModel, this.pageService)
      .subscribe((data) => {
        this.dataSet = data;
        if(this.dataSet){
          this.dataSet.forEach(x=>{
            x.overduePeriod>12?x.overduePeriod = 'M12+':x.overduePeriod = 'M'+x.overduePeriod
          })
        }
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less" scoped>
</style>
